<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCPP.Net 导入系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Noto Sans SC', 'sans-serif']
                    },
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .glass {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-blue-900 min-h-screen text-gray-100 font-sans">
    <div class="bg-cover bg-center min-h-screen" style="background-image: url('https://images.unsplash.com/photo-1639836852109-dd9f99e7bf53?auto=format&fit=crop&q=80');">
        <div class="container mx-auto px-4 py-12">
            <header class="mb-12 text-center">
                <h1 class="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">MCPP.Net 导入系统</h1>
                <p class="text-xl text-blue-200 opacity-80">导入Swagger API并动态注册为MCP工具</p>
            </header>

            <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 导入表单区域 -->
                <div class="md:col-span-2 glass rounded-2xl p-8 shadow-lg border border-white/10">
                    <h2 class="text-2xl font-bold mb-6 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                        导入Swagger API
                    </h2>
                    
                    <form id="importForm" class="space-y-6">
                        <div>
                            <label for="swaggerUrl" class="block text-sm font-medium text-blue-100 mb-1">Swagger文档URL或本地路径 *</label>
                            <input type="text" id="swaggerUrl" name="swaggerUrl" required
                                class="w-full p-3 rounded-lg bg-white/10 border border-white/20 focus:border-blue-400 focus:ring focus:ring-blue-400/20 transition text-white placeholder-blue-200/50"
                                placeholder="https://example.com/swagger/v1/swagger.json">
                        </div>
                        
                        <div>
                            <label for="sourceBaseUrl" class="block text-sm font-medium text-blue-100 mb-1">源服务器基础URL *</label>
                            <input type="text" id="sourceBaseUrl" name="sourceBaseUrl" required
                                class="w-full p-3 rounded-lg bg-white/10 border border-white/20 focus:border-blue-400 focus:ring focus:ring-blue-400/20 transition text-white placeholder-blue-200/50"
                                placeholder="https://api.example.com">
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="nameSpace" class="block text-sm font-medium text-blue-100 mb-1">命名空间 *</label>
                                <input type="text" id="nameSpace" name="nameSpace" required value="MCPP.Net.DynamicTools"
                                    class="w-full p-3 rounded-lg bg-white/10 border border-white/20 focus:border-blue-400 focus:ring focus:ring-blue-400/20 transition text-white">
                            </div>
                            
                            <div>
                                <label for="className" class="block text-sm font-medium text-blue-100 mb-1">类名 *</label>
                                <input type="text" id="className" name="className" required value="DynamicApiTool"
                                    class="w-full p-3 rounded-lg bg-white/10 border border-white/20 focus:border-blue-400 focus:ring focus:ring-blue-400/20 transition text-white">
                            </div>
                        </div>
                        
                        <div class="pt-4">
                            <button type="submit" id="importButton" 
                                class="w-full p-3 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 rounded-lg text-white font-medium shadow-lg shadow-blue-500/30 transition flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
                                </svg>
                                开始导入
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- 导入状态和结果 -->
                <div class="glass rounded-2xl p-6 shadow-lg border border-white/10 flex flex-col">
                    <h2 class="text-xl font-bold mb-4 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        导入状态
                    </h2>
                    
                    <div id="importStatus" class="hidden mb-4 p-4 rounded-lg bg-white/5">
                        <div class="flex items-center">
                            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-400 mr-2"></div>
                            <span>正在导入...</span>
                        </div>
                    </div>
                    
                    <div id="importResult" class="hidden flex-1 overflow-auto">
                        <div class="space-y-4">
                            <div class="p-4 rounded-lg bg-green-900/30 border border-green-500/30">
                                <h3 class="font-bold text-green-400 flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                    导入成功
                                </h3>
                                <p class="text-sm mt-1 text-green-200">成功导入 <span id="apiCount" class="font-semibold">0</span> 个API</p>
                                <p class="text-sm text-green-200">工具类: <span id="toolClassName" class="font-semibold"></span></p>
                            </div>
                            
                            <div>
                                <h4 class="text-sm font-medium text-blue-300 mb-2">已导入API列表:</h4>
                                <div id="apiList" class="bg-white/5 rounded-lg p-2 max-h-48 overflow-y-auto text-sm">
                                    <!-- API列表将在此动态显示 -->
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="importError" class="hidden p-4 rounded-lg bg-red-900/30 border border-red-500/30">
                        <h3 class="font-bold text-red-400 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            导入失败
                        </h3>
                        <p id="errorMessage" class="text-sm mt-1 text-red-200"></p>
                    </div>
                </div>
            </div>
            
            <!-- 已导入工具列表 -->
            <div class="max-w-4xl mx-auto mt-8 glass rounded-2xl p-8 shadow-lg border border-white/10">
                <h2 class="text-2xl font-bold mb-6 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                    已导入工具列表
                </h2>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white/5 rounded-lg overflow-hidden">
                        <thead>
                            <tr class="border-b border-white/10">
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-200 uppercase tracking-wider">命名空间</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-200 uppercase tracking-wider">类名</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-200 uppercase tracking-wider">API数量</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-200 uppercase tracking-wider">导入日期</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-200 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody id="toolsList" class="divide-y divide-white/5">
                            <!-- 工具列表将在此动态显示 -->
                        </tbody>
                    </table>
                </div>
                
                <div id="noTools" class="text-center py-8 text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                    </svg>
                    <p>暂无已导入工具</p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const importForm = document.getElementById('importForm');
            const importStatus = document.getElementById('importStatus');
            const importResult = document.getElementById('importResult');
            const importError = document.getElementById('importError');
            const apiCount = document.getElementById('apiCount');
            const toolClassName = document.getElementById('toolClassName');
            const apiList = document.getElementById('apiList');
            const errorMessage = document.getElementById('errorMessage');
            const toolsList = document.getElementById('toolsList');
            const noTools = document.getElementById('noTools');
            
            // 获取已导入工具列表
            fetchImportedTools();
            
            // 表单提交
            importForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 显示加载状态
                importStatus.classList.remove('hidden');
                importResult.classList.add('hidden');
                importError.classList.add('hidden');
                
                // 获取表单数据
                const formData = {
                    swaggerUrl: document.getElementById('swaggerUrl').value,
                    sourceBaseUrl: document.getElementById('sourceBaseUrl').value,
                    nameSpace: document.getElementById('nameSpace').value,
                    className: document.getElementById('className').value
                };
                
                // 发送API请求
                fetch('/api/Import/Import', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                })
                .then(response => response.json())
                .then(data => {
                    // 隐藏加载状态
                    importStatus.classList.add('hidden');
                    
                    if (data.success) {
                        // 显示成功结果
                        importResult.classList.remove('hidden');
                        apiCount.textContent = data.apiCount;
                        toolClassName.textContent = data.toolClassName;
                        
                        // 渲染API列表
                        apiList.innerHTML = '';
                        data.importedApis.forEach(api => {
                            const div = document.createElement('div');
                            div.className = 'py-1 px-2 hover:bg-white/10 rounded';
                            div.textContent = api;
                            apiList.appendChild(div);
                        });
                        
                        // 刷新工具列表
                        fetchImportedTools();
                    } else {
                        // 显示错误
                        importError.classList.remove('hidden');
                        errorMessage.textContent = data.error || '导入失败';
                    }
                })
                .catch(error => {
                    importStatus.classList.add('hidden');
                    importError.classList.remove('hidden');
                    errorMessage.textContent = error.message || '网络错误';
                });
            });
            
            // 获取已导入工具列表
            function fetchImportedTools() {
                fetch('/api/Import/GetImportedTools')
                .then(response => response.json())
                .then(data => {
                    if (data && data.length > 0) {
                        noTools.classList.add('hidden');
                        renderToolsList(data);
                    } else {
                        noTools.classList.remove('hidden');
                        toolsList.innerHTML = '';
                    }
                })
                .catch(error => {
                    console.error('获取工具列表失败:', error);
                });
            }
            
            // 渲染工具列表
            function renderToolsList(tools) {
                toolsList.innerHTML = '';
                
                tools.forEach(tool => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-white/10 transition';
                    
                    // 格式化日期
                    const date = new Date(tool.importDate);
                    const formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
                    
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">${tool.nameSpace}</td>
                        <td class="px-6 py-4 whitespace-nowrap">${tool.className}</td>
                        <td class="px-6 py-4 whitespace-nowrap">${tool.apiCount}</td>
                        <td class="px-6 py-4 whitespace-nowrap">${formattedDate}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <button class="delete-btn text-red-400 hover:text-red-300 transition" 
                                data-namespace="${tool.nameSpace}" 
                                data-classname="${tool.className}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </td>
                    `;
                    
                    toolsList.appendChild(row);
                });
                
                // 添加删除事件监听
                document.querySelectorAll('.delete-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const nameSpace = this.getAttribute('data-namespace');
                        const className = this.getAttribute('data-classname');
                        
                        if (confirm(`确定要删除 ${nameSpace}.${className} 吗？`)) {
                            deleteImportedTool(nameSpace, className);
                        }
                    });
                });
            }
            
            // 删除导入的工具
            function deleteImportedTool(nameSpace, className) {
                fetch(`/api/Import/DeleteImportedTool?nameSpace=${encodeURIComponent(nameSpace)}&className=${encodeURIComponent(className)}`, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 刷新工具列表
                        fetchImportedTools();
                    } else {
                        alert(data.message || '删除失败');
                    }
                })
                .catch(error => {
                    alert('删除失败: ' + (error.message || '未知错误'));
                });
            }
        });
    </script>
</body>
</html> 